source map
minifyやtranspileしたあとのJavascriptと、元のソースコードの変数名との対応を記述したファイル
変換後のJSファイルに所定の形式のコメントを書くことでひもづけられる
format
ファイル形式
jsonで記述されているようだ
e.g. https://www.github.com/mdn/devtools-examples/tree/master/sourcemaps-in-console%2Fjs%2Fmain.js.map
指定方法は以下のいずれかまたは両方を使う
1. HTTP headerで指定するhttps://tc39.es/source-map/#linking-through-http-headers
sourcemap: <url>
2. ソースファイル中に//# sourceMappingURL=<url>のような形で指定する
source map URLを抽出する厳密な正規表現は/^[@#]\s*sourceMappingURL=(\S*?)\s*$/https://tc39.es/source-map/#match-a-source-map-url-in-a-comment
@も可なのは後方互換性のため
The prefix for this annotation was initially //@ however this conflicts with Internet Explorer’s Conditional Compilation and was changed to //#.https://tc39.es/source-map/#match-a-source-map-url-in-a-comment
6.2.2.1. Extraction methods for JavaScript sourcesにソースコードからsource map URLを抽出するJSのサンプルコードが記されている
https://tc39.es/source-map/#extraction-methods-for-javascript-sources
CSSでも利用可https://tc39.es/source-map/#extraction-methods-for-css-sources
/* */styleのcommentでのみ使用できる
wasmにも使えるらしい
両方指定されている場合は、HTTP headerを優先する
<url>にはdata URLも指定可能
2021-06-28 13:46:39 使ってみたが、微妙
bundle minifyによって省略された変数が多く、それらは全てundefinedという値しかもたない
これだとbreak pointを仕掛けても中身がわからない
わかるのは、処理の流れくらいだろうか?
2024-07-28 10:46:39 元の変数名がわかることで、処理を置いやすくなるのが利点の一つtakker.icon
source map URLをsource fileから抽出するコード
6.2.2.1. Extraction methods for JavaScript sourcesにreference実装がある
2024-07-28 16:36:11 単体テストしたら無限ループに入ってしまった
evanw/source-map-visualizationのcode.jsのfinishLoadingCodeWithEmbeddedSourceMapに、data URLが巨大な場合も考慮したコードが有る
https://code2svg.vercel.app/svg/L103-145/https://raw.githubusercontent.com/evanw/source-map-visualization/f3e9dfec20e7bfd9625d03dd0d427affa74a9c43/code.js#.svg https://github.com/evanw/source-map-visualization/blob/f3e9dfec20e7bfd9625d03dd0d427affa74a9c43/code.js#L103-L145
code:extractSourceMapURL.ts
import { createErr, createOk, Result } from "../option-t/mod.ts";
export interface InvalidURLError {
name: "InvalidURLError";
message: string;
}
export interface NotFoundError {
name: "NotFoundError";
message: string;
}
/**
* Extracts the source map URL from the given code.
*
* This code is based on https://github.com/evanw/source-map-visualization/blob/f3e9dfec20e7bfd9625d03dd0d427affa74a9c43/code.js#L103-L145 under @evanw 's license.
*
* @param code - The code from which to extract the source map URL.
* @param _lang - The language of the code (currently only supports "js").
* @returns The extracted source map URL as a URL object, or null if no source map URL is found.
*/
export const extractSourceMapURL = (
code: string,
base: string | URL | undefined,
): Result<URL, InvalidURLError | NotFoundError> => {
let url;
// Check for both "//" and "/*" comments. This is mostly done manually
// instead of doing it all with a regular expression because Firefox's
// regular expression engine crashes with an internal error when the
// match is too big.
for (const match of code.matchAll(/\/(*/)#@ *sourceMappingURL=/g)) {
const start = match.index + match0.length;
const n = code.length;
let end = start;
while (end < n && code.charCodeAt(end) > 32) {
end++;
}
if (end === start) continue;
if (match1 === "/" || code.indexOf("*/", end) > 0) {
url = code.slice(start, end);
break;
}
}
return url
? URL.canParse(url, base)
? createOk(new URL(url, base))
: createErr({ name: "InvalidURLError", message: Invalid URL: ${url} })
: notFoundError;
};
const notFoundError = createErr<NotFoundError>({
name: "NotFoundError",
message: "Source map URL is not found",
});
どちらもunambiguously links to a source mapには対応していない
libraries
Source Mapを扱う関連ライブラリのまとめ | Web Scratch azu
色々まとまっている
(deprecated) https://github.com/lydell/source-map-resolve
sourceMappingURLをソースコードから抽出するpackage
Source Map Visualizer
evanw/source-map-visualization
https://github.com/evanw/source-map-visualization
esbuildの作者のevanw製
矢印で結ばれるUIがかっこいい
対応関係がわかりやすい
https://gyazo.com/26df3cbc56b10991412724f036d7b9d8
Reference
最新の仕様書
ソースマップを使用する - 開発ツール | MDN
#2024-07-28 10:47:48
#2021-06-27 10:18:00
#2021-06-26 22:29:08